<template>
  <div class="container">
    <toolbar
      :avator="usersVo.avator"
      :icons="true"
      :isEdit="!isEdit"
      :styleObj="styleObj"
      @handleEditClick="showEdit"
    ></toolbar>
    <div class="full-container">
      <scroll :data="booksList" @scroll="scroll">
        <readed-books :readedBook="getFirstBooks"></readed-books>
        <!-- <news-list></news-list> -->
        <div class="divier"></div>
        <books-list v-if="!isEdit" :booksList="booksList"></books-list>
        <books-delete
          v-if="isEdit"
          :booksList="booksList"
          @notifyChangeBooksShelfList="getBooksShelfList"
        ></books-delete>
      </scroll>
    </div>
  </div>
</template>

<script>
import Scroll from "components/Scroll";
import Toolbar from "../../components/Toolbar";

import ReadedBooks from "./components/ReadedBooks";
import BooksList from "./components/BooksList";
import NewsList from "./components/NewsList";
import BooksDelete from "./components/BooksDelete";

import { show } from "utils/Base";
import { mapState } from "vuex";

import { getUsersForCache } from "api/UsersApi";
import { getBooksShelfList } from "api/BooksShelfApi";

export default {
  name: "ShelfIndex",
  components: {
    Scroll,
    Toolbar,
    ReadedBooks,
    BooksList,
    NewsList,
    BooksDelete
  },
  data() {
    return {
      booksList: [],
      styleObj: {
        color: "#FFF",
        background: "transparent!important"
      },
      isEdit: false,
      usersVo: {}
    };
  },
  computed: {
    ...mapState(["token"]),
    getFirstBooks () {
      return this.booksList.length > 0 ? this.booksList[0] : {}
    }
  },
  methods: {
    scroll(pos) {
      let opacity = pos.y / -140;
      if (opacity <= 0) this.styleObj.color = "#FFF";
      else this.styleObj.color = "#212121";

      this.styleObj.background = "rgba(255,255,255, " + opacity + ")!important";
    },
    showEdit(isEdit) {
      this.isEdit = !this.isEdit;
    },
    getUsersForCache() {
      getUsersForCache({}).then(res => {
        if (res.meta.success) {
          this.usersVo = res.data;
        }
      });
    },
    getBooksShelfList() {
      getBooksShelfList({}).then(res => {
        if (res.meta.success) {
          this.booksList = res.data;
        }
      });
    }
  },
  created() {
    if (this.token == null || this.token == "") {
      this.$router.replace("/login");
      return;
    }

    this.getUsersForCache();
    this.getBooksShelfList();
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

.full-container {
  background: #FFF;

  .divier {
    background: #f9f9f9;
    height: 2vw;
    width: 100vw;
  }
}
</style>
